import { join } from 'path'
//拼接路径
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

const resolve = (dir) => join(__dirname, dir)

module.exports = {

  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'assets',
  indexPath: 'index.html',
  lintOnSave: false, //是否开启eslint

  devServer: {

    open: false, //是否自动弹出浏览器页面
    host: 'localhost',
    port: '8086',
    https: false, //是否使用https协议
    hotOnly: false, //是否开启热更新

    proxy: {
      '/api': {
        target: 'http://localhost:3010',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }
  },
  // 配置路径别名
  chainWebpack: (config) => {
    console.warn('DEBUGGER :: ', resolve('./src/views'));

    config.resolve.alias
      .set('@', resolve('./src/views'))
      .set('@src', resolve('./src'))
      .set('@assets', resolve('./src/assets'))
  },
  // 配置全局的scss变量
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import './src/assets/style/variable.scss';`,
      },
    },
  },
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ]
  }
}